<template>
	<el-form ref="form" :model="form" label-width="80px" @submit.prevent="addSubmit" style="margin:20px;width:60%;min-width:600px;">
      <el-form-item label="产品Logo" prop="url">
        <el-upload
            class="avatar-uploader"
            :action="bases"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="产品名称" prop="name">
        <el-input v-model="form.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="产品简介">
        <el-input type="textarea" v-model="form.addr"></el-input>
      </el-form-item>
      <el-form-item label="金额区间">
        <template>
          <el-input class="amount-style" type="text" v-model="form.addr"></el-input>
          ~
          <el-input  class="amount-style" type="text" v-model="form.addr"></el-input>
        </template>
      </el-form-item>
      <el-form-item label="用户属性">
        <el-radio-group v-model="form.sex">
          <el-radio class="radio" :label="0">新客</el-radio>
          <el-radio class="radio" :label="1">老客</el-radio>
          <el-radio class="radio" :label="2">新老客</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="放款单量">
        <el-input-number v-model="form.age" :min="0" :max="10000"></el-input-number>
      </el-form-item>
		<el-form-item>
			<el-button type="primary">立即创建</el-button>
			<el-button @click.native.prevent>取消</el-button>
		</el-form-item>

	</el-form>
</template>

<script>
	import util from "../../common/js/util";
  import {addUser} from "../../api/api";

  export default {
		data() {
			return {
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
      //新增
      addSubmit: function () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;
              //NProgress.start();
              let para = Object.assign({}, this.form);
              para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
              addUser(para).then((res) => {
                this.addLoading = false;
                //NProgress.done();
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['form'].resetFields();
              });
            });
          }
        });
      },

    }
	}

</script>


<style scoped>
.amount-style{
  width: 100px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
